import { Component, Input, ViewChild, ElementRef } from '@angular/core';
import { Http } from '@angular/http';
import { ActivatedRoute } from '@angular/router';
import { environment } from '../../../../../environments/environment';

//Base component
import { RiskBaseComponent } from '../../../../shared/components/riskBase.component';
//Services
import { CompanyRiskService } from '../../../companyRisk.service';
import { AnalyticsService } from '../../../../shared/services/analytics.service'
//Models
import { GoogleAnalyticsBeacon } from '../../../../models/googleAnalytics.beacon'


import * as _ from 'lodash';
import { UtilsService } from '../../../../shared/services/utils.service';

@Component({
    selector: 'indicator-details',
    templateUrl: './indicatorDetails.component.html',
    styleUrls: ['./indicatorDetails.component.css']
})
export class IndicatorDetailsComponent extends RiskBaseComponent {
    private sub: any;
    public expanded: boolean = false;
    public readonly resourcesUrl: string = environment.resourcesUrl;
    public tickboxGroups: Array<any>;
    public getUrlFriendlyName: Function = UtilsService.getUrlFriendlyName;
    public indicatorDetails: any;

    @Input() indicatorIndex: number;
    @Input() canExpand: boolean;
    @Input() indicator: any;
    @Input() showAxis: boolean;
    @Input() columns: any[];
    @Input() subTitle: string;

    @Input() companyId: string;
    @Input() externalId: string;

    @ViewChild('panelLink') panelLink: ElementRef;

    constructor(
        private route: ActivatedRoute,
        private riskService: CompanyRiskService,
        private analyticsService: AnalyticsService,
        private http: Http) {
        super(http);
    }

    ngOnInit() {
    }

    get displayCode() {
        return this.indicator.code.substring(0, 2) !== 'CG';
    }

    public clickToToggle(): void {
        if (this.canExpand == true)
            this.panelLink.nativeElement.click();
    }

    public collapseToggle(): void {
        this.expanded = !this.expanded;
        if (this.expanded) {
            //GoogleAnalytics Beacon
            if (this.externalId == '0') 
                this.analyticsService.sendBeacon(new GoogleAnalyticsBeacon('ESG RR Pillars', 'ESG Risk Rating', { CompanyId: this.companyId, PillarName: this.indicator.name }));
            else
                this.analyticsService.sendBeacon(new GoogleAnalyticsBeacon('ESG RR Indicators', 'ESG Risk Rating', { CompanyId: this.companyId, IndicatorName: this.indicator.name }));
            
            if(this.indicatorDetails == undefined) {
                //get indicator details
                this.riskService.getIndicatorByCode(this.companyId, this.externalId, this.indicator.code).then((data) => {
                    this.indicatorDetails = data;

                    // split checkboxes
                    let numCheckboxes = this.indicatorDetails.checkBoxes.length;
                    this.tickboxGroups = _.chunk(this.indicatorDetails.checkBoxes, (numCheckboxes > 4 ? Math.ceil(numCheckboxes / 2) : numCheckboxes));

                });
            }
        }
    }

    public formatValue(indicator: any, column: any): string {
        let value: number = column.hasNoValue == true ? indicator[column.valueField] : indicator[column.valueField].value;
        if(value == undefined) value = 0;
        if(column.formatMethod) value = column.formatMethod(value);
        return value.toFixed(column.decimals).toString() + ' ' + column.ratingUnit;        
    }
}